<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .red {
                color: red;
            }
            .lime {
                color: lime;
            }
            #blue-box {
                background-color: blue;
                width: 300px;
                height: 200px;
                margin: auto;
            }

        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("p#first-example").click(function(){
                    $(this).hide();
                });

                //                $("p").fadeOut(5000, function() { alert('all')});
                
                $("#lorem-ipsum-hidder").click(function() {
                    var loremIpsumPara = $("p#lorem-ipsum");
                    if(loremIpsumPara.is(":visible")) {

                        $("p#lorem-ipsum").hide();
                        $("#lorem-ipsum-hidder").html($("#lorem-ipsum-hidder").html() + " schowany");
                        $("#lorem-ipsum-hidder").addClass("red");
                    } else {
                        $("p#lorem-ipsum").show();
                        $("#lorem-ipsum-hidder").html($("#lorem-ipsum-hidder").html() + " widoczny");
                        $("#lorem-ipsum-hidder").removeClass("red");

                    }
                })

                $('#all-lime').click(function() {

                    var limeremover = function() {
                        if($(this).hasClass("lime")) {
                            $(this).removeClass("lime");
                        } else {
                            $(this).addClass("lime");

                        }

                    };

                    $('p, h1').map(limeremover);

                });

                $("#blue-box-color-changer").click(function() {
                    $("#blue-box").animate({ backgroundColor: "red" }, 1000);

                });

            });

        </script>
    </head>

    <body>
        <p id="first-example">If you click on me, I will disappear.</p>
        <h1 id="lorem-ipsum-hidder">Click me and lorem ipsum will dissapear</h1>
        <p id="lorem-ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae neque ante. Aenean non est justo. Ut sit amet enim velit, eget vehicula odio. Cras malesuada congue interdum. Nullam cursus nulla adipiscing risus accumsan condimentum pellentesque neque scelerisque. In vel velit ut leo congue porta quis eu nisl. Etiam neque enim, viverra ut viverra non, venenatis nec nunc. Vivamus et suscipit velit. Suspendisse potenti. Proin venenatis nisi nec libero rhoncus mattis. </p>
        <h1 id="all-lime">Click me to make all paragraphs and headers lime</h1>

        <div id="blue-box"> this is blue box</div>

        <p id="blue-box-color-changer"> change color of blue box</p>

    </body>
</html>
